<template>
    <view>
        <view class="invite-friends">
            <text>当前定位</text>
            <image class="invite-icon" mode="scaleToFill" src="https://pic.imgdb.cn/item/667d118fd9c307b7e9427fe9.png" />
            <view class="invite-text">
                <text>{{ city }}</text>
            </view>
        </view>
        <view class="base">
            <list header="其他城市"></list>
            <index-bar className="indexbar" :items="items" defaultCurrent="A" onChange="onChange">
                <view slot-scope="props">
                    <list :header="props.value.label">
                        <list-item :data-city="city" onTap="onCitySelect" v-for="(city, index) in props.value.cities" :key="index">
                            {{ city }}
                        </list-item>
                    </list>
                </view>
            </index-bar>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {
   
    },
    data() {
        return {
            items: [],
            city: '',

            props: {
                value: {
                    label: '',
                    cities: []
                }
            }
        };
    },
    onLoad() {
        const items = citys.map((city) => {
            return {
                label: city.letter,
                cities: city.list
            };
        });
        this.setData({
            items
        });
        const that = this;
        uni.getLocation({
            type: 1,
            // Using type 1 to get city information
            success(res) {
                that.setData({
                    city: res.city
                });
                uni.alert({
                    title: '你所在的城市是 ' + res.city
                });
            },
            fail() {
                uni.alert({
                    title: '获取定位失败'
                });
            }
        });
    },
    methods: {
        handleRef(ref) {
            this.form.addItem(ref);
        },

        gomap() {
            uni.navigateTo({
                url: '/pages/map/map'
            });
        },

        onCitySelect(event) {
            const selectedCity = event.target.dataset.city;
            uni.navigateTo({
                url: `pages/index/index?city=${selectedCity}`
            });
        }
    }
};
</script>
<style>
.base {
    width: 100%;
    height: 100vh;
}
.indexbar {
    position: fixed;
    right: 10px;
    top: 20vh;
}
.header {
    height: 150px;
    background-color: aqua;
}
.invite-friends {
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.invite-icon {
    width: 24px;
    height: 24px;
}

.invite-text {
    display: flex;
    flex-direction: column;
}

</style>
